<template>
	<div class="refundApproval">
		<p class="bottons">
			<el-button type="text" @click="ViewProcessTraces">
				<i class="el-icon-tickets"></i>查看流程痕迹
			</el-button>
			<el-button type="text" @click="lookFile">
				<i class="el-icon-printer"></i>附件
			</el-button>
			<el-button v-if="!role" type="text" @click="closeProgress">
				<i class="el-icon-close"></i>关闭
			</el-button>
		</p>
		<h1>退款付款申请审批</h1>
		<table>
			<tr class="tableTitle">
				<td colspan="4">基本信息</td>
			</tr>
			<tr>
				<td>发起人</td>
				<td>{{info.originator}}</td>
				<td>发起时间</td>
				<td>{{info.originateTime}}</td>
			</tr>
			<tr>
				<td>发起组织名称</td>
				<td>{{info.originateName}}</td>
				<td>付款审批单号</td>
				<td>{{info.code}}</td>
			</tr>
			<tr>
				<td>付款审批名称</td>
				<td colspan="3">{{info.payNote}}</td>
			</tr>
			<tr class="tableTitle">
				<td colspan="4">付款审批概述</td>
			</tr>
			<tr>
				<td>审批事项</td>
				<td>{{info.approvalMatter}}</td>
				<td>付款类型</td>
				<td>{{info.payType}}</td>
			</tr>
			<tr>
				<td>前置条件</td>
				<td colspan="3">
				<pre v-html="info.precondition"></pre>
			</td>
			</tr>
			<tr>
				<td>流程事项编码</td>
				<td colspan="3">{{info.workflowCodeInfo}}</td>
			</tr>
			<tr>
				<td>付款方</td>
				<td>{{info.payerName}}</td>
				<td>收款方</td>
				<td>{{info.payeeName}}</td>
			</tr>
			<tr>
				<td>付款方开户支行</td>
				<td>{{info.payerBranchBankName}}</td>
				<td>收款方开户支行</td>
				<td>{{info.bankBranchName}}</td>
			</tr>
			<tr>
				<td>付款账号</td>
				<td>{{info.payerAccount}}</td>
				<td>收款账号</td>
				<td>{{info.payeeAccount}}</td>
			</tr>
			<tr>
				<td>本次请款金额</td>
				<td>{{info.payBrokerage}}</td>
				<td>批复金额</td>
				<td>{{info.approvalPayBrokerage}}</td>
			</tr>
			<tr>
				<td>票据方式</td>
				<td>{{info.billWay}}</td>
				<td>计税方式</td>
				<td>{{info.taxCalculationWay}}</td>
			</tr>
			<tr>
				<td>经办人</td>
				<td>{{info.operator}}</td>
				<td>联系电话</td>
				<td>{{info.mobile}}</td>
			</tr>
			<tr class="tableTitle">
				<td colspan="4">审批意见</td>
			</tr>
			<tr style="height:60px" v-for="item in info.logList" :key="item.id">
				<td v-if="item.oprationFlag == 0">经办人</td>
				<td v-else>审批人</td>
				<td colspan="3" class="approval">
					<span>{{item.content ? item.content : '无'}}</span>
					<span>{{item.userName}}</span>
					<span>{{item.userRole}}</span>
					<span>{{auditTime(item.auditTime)}}</span>
				</td>
			</tr>
		</table>
		<el-dialog :visible.sync="dialogTableVisible">
			<el-table border :data="fileList">
				<el-table-column property="fileName" label="文件名"></el-table-column>
				<el-table-column property="uploadName" label="创建人"></el-table-column>
				<el-table-column property="uploadTime" label="上传时间"></el-table-column>
			</el-table>
		</el-dialog>
	</div>		
</template>

<script>
	import utils from "@/common/utils";
	export default {
		name:"refundapproval",
		data(){
			return {
				info: {},
				role:"",
				fileList: [],
				dialogTableVisible: false,
				orderCode: this.$route.query.orderCode,
				workItemId: "",
				instanceId: ""
			}
		},
		methods:{
			auditTime(auditTime) {
				return utils.getTimeString(auditTime);
			},
			loadData(){
				this.$axios.post(`/cms/posCmsOrder/selectProcess`,{orderCode:this.orderCode}).then(res => {
	               console.log(res);
	               this.info=res;
	               this.fileList = res.refundFileList || [];
	            });
			},
			lookFile(){
				this.dialogTableVisible=true;
			},
			ViewProcessTraces() {
				// 测试t  生产去掉t
				let mobile = JSON.parse(window.localStorage.getItem("cmsUser")).mobile;

				let variable = document.domain;
				let url;
				if(variable == "localhost"){
				url = "http://th3bpm.lifeat.cn:45787"
				}
				if(variable == "ntcms.lifeat.cn"){
				url = "http://th3bpm.lifeat.cn:45787"
				}
				if(variable == "ncms.lifeat.cn"){
				url = "http://h3bpm.lifeat.cn"
				}
				if(variable == "nhcms.lifeat.cn"){
				url = "https://hh3bpm.lifeat.cn:45788"
				}
				let winUrl = `${url}/Portal/#/platform/login?mobile=${mobile}&workItemId=${this.workItemId}&instanceId=${this.instanceId}`;
				window.open(winUrl);
			},
			closeProgress(){
				this.$router.push({
                	path:"/payorderchecks"
                })
			}
		},
		mounted(){
			this.loadData();
		}
	}
</script>

<style lang="stylus" scoped>
	.refundApproval {
		position: relative;

		h1 {
			color: #409eff;
			margin: 35px auto;
			text-align: center;
		}

		.bottons {
			position: absolute;
			right: 35px;
			top: 5px;
			i {
				margin-right: 5px;
			}

			el-button {
				margin-right: 15px;
			}
		}

		table {
			font-size: 15px;
			border-collapse: collapse;
			width: 100%;
			margin: 0 auto;

			tr td {
				border: 1px solid #ccc;
				line-height: 40px;
				box-sizing: border-box;
				padding: 0 3px;
				text-align: center;
				width: 25%;
			}

			tr td:nth-child(odd) {
				text-align: right;
				color: #409eff;
			}

			tr td:nth-child(even) {
				text-align: left;
			}

			.tableTitle td {
				text-align: center !important;
				background: #f2f2f2;
				color: #409eff;
				font-weight: bold;
			}

			pre {
				font-family: 'Avenir', Helvetica, Arial, sans-serif;
			}

			.approval span {
				margin-left: 15px;
			}
		}
	}
</style>
